<template>
  <view class="container border-box flex oh relative bg-trans " :style="{width: size + 'rpx', height: size + 'rpx'}" >
    <view class="viewport viewport-l flex-1 oh relative bg-trans">
      <view class="rotate-container absolute top-0 left-0 border-box oh z-1 flex bg-trans" :style="{width: size + 'rpx', height: size + 'rpx', transform: `rotate(${angle.angleL}deg)`}">
        <view class="circle-box-left-bg flex-1 oh relative bg-trans">
          <view class="circle-active absolute br-round top-0 left-0 bg-trans" :style="{width: size + 'rpx', height: size + 'rpx', borderWidth: borderWidth + 'rpx', borderColor: `${defaultColor}`, borderStyle: 'solid'}"></view>
        </view>
        <view class="circle-box-right-active flex-1 oh relative bg-trans">
          <view class="circle-bg absolute br-round top-0 right-0 bg-trans" :style="{width: size + 'rpx', height: size + 'rpx', borderWidth: borderWidth + 'rpx', borderColor: `${activeColor}`, borderStyle: 'solid'}"></view>
        </view>
      </view>
    </view>
    <view class="viewport viewport-r flex-1 oh relative bg-trans">
      <view class="rotate-container absolute top-0 right-0 border-box oh z-1 flex bg-trans" :style="{width: size + 'rpx', height: size + 'rpx', transform: `rotate(${angle.angleR}deg)`}">
        <view class="circle-box-left-active flex-1 oh relative bg-trans">
          <view class="circle-active absolute br-round top-0 left-0 bg-trans" :style="{width: size + 'rpx', height: size + 'rpx', borderWidth: borderWidth + 'rpx', borderColor: `${activeColor}`, borderStyle: 'solid'}"></view>
        </view>
        <view class="circle-box-right-bg flex-1 oh relative bg-trans">
          <view class="circle-bg absolute br-round top-0 right-0 bg-trans" :style="{width: size + 'rpx', height: size + 'rpx', borderWidth: borderWidth + 'rpx', borderColor: `${defaultColor}`, borderStyle: 'solid'}"></view>
        </view>
      </view>
    </view>
    <view class="circle-bg border-box oh absolute top-0 left-0 br-round z-0 bg-trans" :style="{width: size + 'rpx', height: size + 'rpx', borderWidth: borderWidth + 'rpx', borderColor: `${circleBgColor}`, borderStyle: 'solid'}"></view>
    <view class="slot-container border-box oh absolute top-0 left-0 br-round z-2 bg-trans" :style="{padding: borderWidth + 'rpx', width: size + 'rpx', height: size + 'rpx'}">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "CustomCircleProgress",
  props: {
    borderWidth: {
      type: Number,
      default: 10
    },
    activeColor: {
      type: String,
      default: '#19BE6B'
    },
    defaultColor: {
      type: String,
      default: '#DFDFDF'
    },
    size: {
      type: Number,
      default: 150
    },
    percent: {
      type: Number,
      default: 20
    }
  },
  computed: {
    angle() {
      if (this.percent > 0 && this.percent <= 50) {
        return {
          angleL: 0,
          angleR: (180 / 50) * this.percent
        }
      } else if(this.percent > 50 && this.percent <=100) {
        return {
          angleL: (180 / 50) * (this.percent - 50),
          angleR: 180
        }
      } else {
        return {
          angleL: 0,
          angleR: 0
        }
      }
    },
    circleBgColor() {
      return this.percent === 100 ? this.activeColor : this.defaultColor
    }
  },
}
</script>
